<template>
    <div class="func-row f f-ac mt-30 mb-20">
        <div class="f f-ac" @click="handleComment">
            <img :src="iconComment" /> {{ comment }}
        </div>
        <div class="f f-ac" @click="handleLike">
            <img :src="is_like != 0 ? iconLiked : iconLike" /> {{ like }}
        </div>
        <div class="f f-ac" @click="handleCollect">
            <img :src="is_collect != 0 ? iconCollected : iconCollect" />
            {{ collect }}
        </div>
    </div>
</template>

<script>
    import { commonLike, commonCollect } from "@/utils/home/index.js";
    export default {
        props: {
            // 评论数
            comment: {
                type: Number,
                default: 0,
            },
            // 点赞数
            like: {
                type: Number,
                default: 0,
            },
            // 收藏数
            collect: {
                type: Number,
                default: 0,
            },
            // 是否点赞
            is_like: {
                type: [String, Number],
                default: 0,
            },
            // 是否收藏
            is_collect: {
                type: [String, Number],
                default: 0,
            },
            // 滚动位置ID
            posId: {
                type: String,
                default: "comment",
            },
            // 类型 1=汇资讯,2=学才艺,3=赶大集,4=享活动,5=读好书,6=订场馆,7=品非遗
            type:{
                type: [String, Number],
                default: 1,
            },
            id:{
                type: [String, Number],
                default: 0,
            },
        },
        data() {
            return {
                iconComment: require("@/assets/icon-comment.png"),
                iconLike: require("@/assets/icon-like1.png"),
                iconLiked: require("@/assets/icon-liked1.png"),
                iconCollect: require("@/assets/icon-collect1.png"),
                iconCollected: require("@/assets/icon-collected1.png"),
            };
        },
        methods: {
            // 平滑滚动到位置
            handleComment() {
                let temp = document.getElementById(this.posId);
                temp.scrollIntoView({ block: "start", behavior: "smooth" });
            },
            // 点赞
            handleLike() {
                commonLike({
                    id: this.id,
                    operate: this.is_like == 0 ? 1 : 2,
                    table: this.type
                }).then((res) => {
                    this.$emit("like", this.id);
                });
            },
            // 收藏
            handleCollect() {
                commonCollect({
                    id: this.id,
                    operate: this.is_collect == 0 ? 1 :2,
                    table: this.type
                }).then((res) => {
                    this.$emit("like", this.id);
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .func-row {
        color: #555;
        font-size: 10px;

        >div {
            user-select: none;
            margin-right: 36px;

            &:hover {
                cursor: pointer;
                color: #193980;
            }

            &:first-child {
                color: #979797;
            }
        }

        img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
        }
    }
</style>